
@import "foundation";


$width-mobile: 320px;
$width-tablet: 990px;
$width-desktop: 1310px;
$width-wide: 1640px;

$pad10: emCalc(10px);
$pad12: emCalc(12px);

$base-margin: 30px;

$margin20: emCalc(20px);
$margin24: emCalc(24px);

$top-bar-height: 45px;


@media #{$small} {
    body .row{
        width: $width-mobile;
        max-width: $width-mobile;
    }

    .column, .columns{
        padding-left: $pad10;
        padding-right: $pad10;
    }
}

@media #{$medium} {
    body .row{
        width: $width-tablet;
        max-width: $width-tablet;
    }

    .column, .columns{
        padding-left: $pad12;
        padding-right: $pad12;
    }
    
    body .row2 {
        width: $width-tablet;
        margin: 0 auto;
    }
}

@media #{$large} {

    body .row {
        width: $width-desktop;
        max-width: $width-desktop;
    }
    .column, .columns {
        padding-left: $pad10;
        padding-right: $pad10;
    }
    
    body .row2 {
        width: $width-tablet;
        margin: 0 auto;
    }
    
}

@media #{$xlarge} {
    body .row{
        width: $width-wide;
        max-width: $width-wide;
    }

    .column, .columns {
        padding-left: $pad12;
        padding-right: $pad12;
    }  

    body .row2 {
        width: $width-tablet;
        margin: 0 auto;
    }
}

// Change visibility classes

@media #{$small} {
    .show-for-small,
    .show-for-medium-down,
    .show-for-large-down { display: inherit !important; }
    
    .show-for-medium,
    .show-for-medium-up,
    .show-for-large,
    .show-for-large-up,
    .show-for-xlarge { display: none !important; }
    
    .hide-for-medium,
    .hide-for-medium-up,
    .hide-for-large,
    .hide-for-large-up,
    .hide-for-xlarge { display: inherit !important; }
    
    .hide-for-small,
    .hide-for-medium-down,
    .hide-for-large-down { display: none !important; }
}

@media #{$medium} {
    .show-for-medium,
    .show-for-medium-up { display: inherit !important; }
    .show-for-small { display: none !important; }
    .hide-for-small { display: inherit !important; }
    .hide-for-medium,
    .hide-for-medium-up { display: none !important; }
}

@media #{$large} {
    .show-for-large,
    .show-for-large-up { display: inherit !important; }
    .show-for-medium,
    .show-for-medium-down { display: none !important; }
    .hide-for-medium,
    .hide-for-medium-down { display: inherit !important; }
    .hide-for-large,
    .hide-for-large-up { display: none !important; }
}
@media #{$xlarge} {
    .show-for-xlarge { display: inherit !important; }
    .show-for-large,
    .show-for-large-down { display: none !important; }
    .hide-for-large,
    .hide-for-large-down { display: inherit !important; }
    .hide-for-xlarge { display: none !important; }
}


